<template>
  <div style="padding: 0 2rem;">
    <ul class="colorF font_s22 textC tb_list flex"  style="background-color: #042a79;color: #fff">
      <li class="flex1">序号</li>
      <li class="flex4">机构</li>
      <li class="flex2">检查人</li>
      <li class="flex2">检查类别</li>
      <li class="flex2">处置时间</li>
      <li class="flex4">问题描述</li>
      <li class="flex2">整改完成时间</li>
      <li class="flex2">整改内容</li>
    </ul>
    <div class="superviseList font_s18 " style="height: 67vh;margin: 0px 0rem 0rem;padding-bottom: 2rem;box-sizing: border-box">
      <ul class="flex tb_list colorF font_s18 textC"
          v-for="(item, i ) in dataList"
          :key="item.id"
          :class="{evenbg:i%2==1}">
        <li class="flex1 num">{{i+1}}</li>
        <li class="flex4 txt">{{item.jgmc}}</li>
        <li class="flex2 txt">{{item.jgry}}</li>
        <li class="flex2 txt">{{item.jclb}}</li>
        <li class="flex2 num">{{item.czsj}}</li>
        <li class="flex4 txt" style="line-height:1.425rem;">{{item.czms}}</li>
        <li class="flex2 num">{{item.zgsj}}</li>
        <li class="flex2 txt">{{item.zgms}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DtjgListModal',
  props: {
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  ul.tb_list li{
    margin: 1rem 0 1rem 1rem;
    padding: .6rem 0;
    text-align: center;
  }
  ul.evenbg {
    background-color: #0c1e51;
    background-position: 100% 100%;
  }
  .num {
    font-family: Impact;
    font-weight: 400;
  }
  .txt {
    font-family: Microsoft YaHei;
    font-weight: normal;
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: auto
  }
  ::-webkit-scrollbar {
    width: 0 !important;
  }
  ::-webkit-scrollbar {
    width: 0 !important;height: 0;
  }
</style>
